<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://lib.baomitu.com/vue/2.7.7/vue.js"></script>
    <script src="./dist/include-openlayers-local.js"></script>
    <script src="./lib/map.js"></script>
    <script src="./lib/draw.js"></script>
    <script src="./lib/ES6-Query.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #app {
        width: 100vw;
        height: 100vh;
      }

      #map {
        width: 100%;
        height: 100%;
      }

      table,
      tr,
      th,
      td {
        font-family: verdana, arial, sans-serif;
        font-size: 11px;
        color: #333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
      }

      th {
        background: #b5cfd2 ;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
      }

      .table {
        position: absolute;
        top: 50px;
        right: 40px;
        padding: 10px;
        border-radius: 10px;
        background-color: #fff;
        z-index: 1000;
      }
      td {
        background: #dcddc0 ;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
      }

      .header {
        background-color: skyblue;
      }

      .header button {
        float: right;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <!-- 查询表单的显示和隐藏  -->
      <div class="table" v-if="showResult">
        <div class="header">
          <!-- <span>拉框查询结果</span> -->
          <button @click="showResult = false">X</button>
        </div>
        <table>
          <thead border="1">
            <tr>
              <th>FID</th>
              <th v-for="(fname,index) in FldNames" :key="index">{{fname}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="fea in features" :key="fea.FID">
              <td>{{fea.FID}}</td>
              <td v-for="(value,index) in fea.AttValue">{{value}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 激活和退出交互式画笔 -->
      <button @click="activeDraw">拉框查询</button>
      <button @click="exit">关闭查询</button>

      <div id="map"></div>
    </div>

    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            map: {},
            draw: {},
            source: {},
            queryResult: {},
            FldNames: [],
            features: [],
            showResult: false,
            drawSource: {},
          };
        },
        methods: {
          initMap() {
            this.map = new ol.Map({
              target: "map",
              layers: [gaode],
              view: new ol.View({
                projection: "EPSG:4326",
                center: [114.37, 30.5],
                zoom: 12,
                maxZoom: 18,
                minZoom: 4,
              }),
            });
            /* 加载地图文档 */
            const docLayer = new Zondy.Map.Doc("", "guanggu", {
              ip: "localhost",
              port: 6163,
            });
            /* 给地图添加地图文档图层 */
            this.map.addLayer(docLayer);
            // 定义空的矢量数据源
            this.source = new ol.source.Vector({});
            //   将数据源画笔画出的要素添加到图层
            const layer = new ol.layer.Vector({
              source: this.source,
            });
            //   地图添加图层
            this.map.addLayer(layer);
          },
          activeDraw() {
            // 定义画笔的方法使用封装的draw
            this.draw = createDraw({
              type: "Rectangle",
              source: this.source,
              callback: this.handleDraw,
            });
            //   给地图添加交互式画笔
            this.map.addInteraction(this.draw);

            //实例化一个矢量图层drawLayerr用于高亮显示结果
            this.drawSource = new ol.source.Vector({
              wrapX: false,
            });
            // console.log(this.drawSource.getFeatures());
            drawLayer = new ol.layer.Vector({
              source: this.drawSource,
              style: new ol.style.Style({
                image: new ol.style.Circle({
                  radius: 17,
                  /* 填充色 */
                  fill: new ol.style.Fill({
                    color: "rgba(0,255,0,1)",
                  }),
                  /* 描边 */
                  stroke: new ol.style.Stroke({
                    color: "#ff2d51",
                    width: 2,
                  }),
                }),
              }),
            });
            this.map.addLayer(drawLayer);
          },
          handleDraw(e) {
            // 每次画之前清空上次的数据源
            this.source.clear();
            this.drawSource.clear();
            // console.log(this.drawSource)
            var geom = e.feature.getGeometry();
            // 调用封装的查询的方法
            Query.queryByGeom({
              geometry: geom,
              service: {
                name: "guanggu",
                layerId: 2,
              },
              callback: this.onSuccess,
            });
          },
          onSuccess(res) {
            // console.log(res);
            // 要是成功给数组赋值当前结果
            this.queryResult = res;
            // 要是 没有查到 就直接return
            if (res.TotalCount == 0) {
              alert("此区域未查询到事件");
              return;
            }
   
            this.FldNames = this.queryResult.AttStruct.FldName;
            this.features = this.queryResult.SFEleArray;
                     console.log(this.FldNames);
            console.log(this.features);
            // 查到之后赋值并显示查到的结果框
            this.showResult = true;
            //初始化Zondy.Format.PolygonJSON类
            var format = new Zondy.Format.PolygonJSON();
            //将MapGIS要素JSON反序列化为ol.Feature类型数组
            var selectFeatures = format.read(res);
            // 给高亮显示添加查询到的要素
            this.drawSource.addFeatures(selectFeatures);
          },
          exit() {
            this.map.removeInteraction(this.draw);
            this.draw = null;
            this.source.clear();
            this.map.removeLayer(drawLayer);
          },
        },

        mounted() {
          this.initMap();
        },
      });
    </script>
  </body>
</html>
